<template>
  <div id="app">
    <transition name="out">
      <SideMenu v-show="showMenu" @close="showMenu=false"></SideMenu>
    </transition>
    <transition name="page">
          <router-view></router-view>
    </transition>
    
  </div>
</template>

<script>
import SideMenu from './components/SideMenu.vue'
import bus from "./util/bus.js"
export default {
  name: 'app',
  components: {
    SideMenu
  },
  data: function () {
    return {
      showMenu: false
    }
  },
  mounted:function(){
    bus.$on("openMenu",function () {
      this.showMenu = true;
    }.bind(this))
  }
}
</script>

<style>
.out-enter{
    transform: translate(-100%,0)
}
.out-enter-active{
    transition: all 0.7s linear;
}

.out-leave-active{
transform: translate(-100%,0);
transition: all 0.7s linear;
}

.page-ender{
  transform: translate(100%,0);
}
.page-ender-active{
  transition: all 0.7s linear;
  position: absolute;
  width: 100%;
}
.page-leave-active{
  transform: translate(-100%,0);
  transition: all 0.7s linear;
  position: absolute;
  width: 100%;
}
</style>
